import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;
/*
  全局事件总线：
    目的：实现任意组件通信
    自定义事件特点：给哪个组件绑定，就只有这个组件可以触发
    假设：如果绑定自定义事件，任意组件都可以触发
    实现：
      1. 找到一个可以绑定自定义事件
        组件实例对象
        Vue的实例对象
      2. 想办法让所有组件都可以访问它
        通过它去绑定事件，同时通过它触发事件
        Vue.prototype.$globalEventBus = Vue实例

        vm.__proto__ === Vue.prototype
        this.__proto__ === VueComponent.prototype
        VueComponent.prototype.__proto__ === Vue.prototype
        this.__proto__.__proto__ === Vue.prototype

        Vue.prototype有绑定事件、触发事件等方法

        什么内容可以绑定事件或触发事件？ 只要可以访问 Vue.prototype 的对象，就可以
          组件实例对象
          Vue的实例对象

    使用：
      1. 定义全局事件总线对象
        - Vue.prototype.$globalEventBus = new Vue();
        - beforeCreate() {
            Vue.prototype.$globalEventBus = this;
          },

      2. 绑定事件（接受数据方、被修改数据方）
          mounted() {
            this.$globalEventBus.$on("update", this.update);
          },
          beforeDestroy() {
            this.$globalEventBus.$off("update", this.update);
          },
      3. 触发事件（发送数据方、修改其他组件数据）
          this.$globalEventBus.$emit('update')
*/

// Vue.prototype.$globalEventBus = new Vue();

new Vue({
  beforeCreate() {
    // this就是vm，就是Vue的实例
    Vue.prototype.$globalEventBus = this;
  },
  render: (h) => h(App),
}).$mount("#app");

// console.log(vm);
